<template>
  <div ref="mybox" class="box" />
</template>

<script>
// 全部导入
// import * as echarts from 'echarts'

import * as echarts from 'echarts/core' // 引入主模块
import { TitleComponent, LegendComponent, TooltipComponent } from 'echarts/components' // 引入提示框/标题组件/图例组件
import { RadarChart } from 'echarts/charts' // 引入雷达图
import { CanvasRenderer } from 'echarts/renderers' // 引入canvas渲染器

echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer, TooltipComponent]) // 注册必要组件

export default {
  mounted() {
    // 1. 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.mybox)
    // 2. 绘制图表
    myChart.setOption({
      // 标题
      title: {
        text: '绩效分析' // 主标题文本
      },
      // 提示框
      tooltip: {},
      // 图例组件
      legend: {
        data: ['张三', '李四', '王五'], // 图例的数据数组
        right: 0, // 图例组件离容器右侧的距离
        orient: 'vertical' // 图例列表的布局朝向
      },
      // 雷达图坐标系组件，只适用于雷达图
      radar: {
        // shape: 'circle',  // 雷达图绘制类型，支持 'polygon' 和 'circle'
        // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
        indicator: [
          { name: '工作效率', max: 100 },
          { name: '考勤', max: 100 },
          { name: '积极性', max: 100 },
          { name: '帮助同事', max: 100 },
          { name: '自主学习', max: 100 },
          { name: '正确率', max: 100 }
        ]
      },
      // 雷达图主要用于表现多变量的数据，例如球员的各个属性分析
      series: [
        {
          name: '张三 vs 李四 vs 王五',
          type: 'radar',
          data: [
            {
              value: [80, 100, 90, 100, 90, 100],
              name: '张三'
            },
            {
              value: [90, 70, 80, 60, 75, 90],
              name: '李四'
            },
            {
              value: [99, 99, 99, 99, 99, 99],
              name: '王五'
            }
          ]
        }
      ]
    })
  }
}
</script>

  <style>
   .box {
    width: 520px;
    height: 300px;
    /* background-color: red; */
   }
  </style>
